<template>
  <div>
    <el-table :data="tableData" border class="table" :height="getHeight()" style="margin: 20px; width: 95%;">
      <el-table-column type="index" label="序号" width="50" align="center" fixed>
      </el-table-column>


      <el-table-column prop="content" label="评价"  align="center">
      </el-table-column>
      <el-table-column prop="created_at" label="评论时间" width="200" align="center">
      </el-table-column>
      
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small" class="delbtn"
            style="color: red;">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>
  </div>
</template>
  
<script>
import {delCommentInfo,getCommentInfo} from '@/api/goods'
export default {
  name: 'evaluate',
  data() {
    return {
      tableData: [],
      page: 1,
      limit: 10,
      count: 0,
    }
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
      getCommentInfo({page:this.page,limit:this.limit}).then(res=>{
        //console.log(res)
        if(res.code==1){
          this.tableData=res.data.list
          this.count=res.data.count
        }
      })
    },

    //改变每页多少条
    handleSizeChange(val) {
      this.limit = val
      this.getList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 200
    },

    deleteRow(row){
      delCommentInfo(row).then(res=>{
        if(res.code==1){
          this.$message.success('删除成功')
        }
      })
    }


  },
}
</script>  
  
<style  scoped></style>
  